<template>
  <a-modal :width="300" v-model:visible="visible" @cancel="closeModal" :footer="false">
    <template #title> 分享</template>
    <h4 style="margin-top: 0">复制分享链接</h4>
    <a-typography-paragraph copyable>
      {{ link }}
    </a-typography-paragraph>
    <h4>手机扫码查看</h4>
    <img :src="code" alt="二维码"/>
  </a-modal>
</template>

<script>
import QRCode from 'qrcode';

export default {
  props: {
    title: {
      type: String,
      default: '分享'
    },
    link: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      code: ''
    };
  },
  methods: {
    openModal() {
      this.visible = true;
    },
    closeModal() {
      this.visible = false;
    }
  },
  mounted() {
    QRCode.toDataURL(this.link)
      .then((url) => {
        this.code = url;
      })
      .catch((err) => {
        console.error(err);
      });
  }
};
</script>
